<template>
  <a-modal :open="open" width="800px" title="归档日志" :footer="false" centered @cancel="onCancel">
    <a-form class="mt-5 mb-10 pl-5" :model="formState" name="validate_other">
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item label="应用名称">
            <a-input v-model:value="formState.applicationName" readonly />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="功能模块">
            <a-input v-model:value="formState.applicationModule" readonly />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="日志级别">
            <a-input v-model:value="formState.logLevel" readonly />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="日志内容">
            <a-textarea v-model:value="formState.content" readonly />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="归档时间">
            <a-input v-model:value="formState.backupTime" readonly />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>
<script setup>
import { ref, watch } from 'vue'

const formState = ref({})
const props = defineProps({
  open: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => ({})
  }
})
const emit = defineEmits(['update:open'])
const onCancel = () => {
  emit('update:open', false)
}
watch(
  () => props.open,
  (val) => {
    if (val) {
      formState.value = props.rowData
    }
  },
  {
    immediate: true
  }
)
</script>
